<template>
  <div class="module"  style="min-height: 265px;max-height: 400px;">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1">
        <template slot="tab">
          {{$t('m.system.portlet.announcement.notification')}}<span>({{count}})</span>
        </template>
        <div class="module-in">
          <div class="backlog">
            <a-table
              rowKey="id"
              :columns="columns"
              :data-source="dataSource"
              :show-header="false"
              :pagination="false"
              size="small"
            >
              <template slot="links" slot-scope="text, record,index">
                <a @click="showDetail(record)">{{text}}&nbsp;<a-badge class="a-badge-new" count="NEW" v-if="index < 3"/></a>
              </template>
            </a-table>
          </div>
        </div>
      </a-tab-pane>
      <!-- 右侧图标 -->
      <template slot="tabBarExtraContent">
        <ych-icon
          type="sync"
          class="panel-icon" @click="loadData"
        />
        <ych-icon type="more" class="panel-icon" @click="loadMore"/>
      </template>
    </a-tabs>
    <show-announcement ref="ShowAnnouncement"></show-announcement>
  </div>
</template>

<script>
  import { getAction,putAction} from '@/api/manage'
  import YchConstant from "@/api/YchConstant"
  import ShowAnnouncement from '@/framework/tools/ShowAnnouncement'
    export default {
        name: "Announcement",
        components: {
          ShowAnnouncement
        },
        data(){
          return{
            loading: false,
            url:{
              queryAnnouncementsByLimit:YchConstant.PREFIX_SYSTEM + "/annountCement/queryAnnouncementsByLimit/v1",
              queryById:YchConstant.PREFIX_SYSTEM + "/annountCement/queryById"
            },
            dataSource:[],
            columns:[
              {
                title: this.$t('m.system.announcement.entity.titile'),
                dataIndex: 'title',
                ellipsis: 'true', //设置溢出变省略号
                scopedSlots: { customRender: 'links' },
              },
              {
                title: this.$t('m.system.announcement.entity.sender'),
                dataIndex: 'sender',
                width: '120px',
                align: 'center',
                ellipsis: 'true',
                className: 'color01'
              },
              {
                title: this.$t('m.system.announcement.entity.sendTime'),
                dataIndex: 'sendTime',
                width: '120px',
                align: 'center',
                ellipsis: 'true',
                className: 'color01'
              }
            ],
            count:0,

          }
        },
        created () {
          this.loadData()
        },
        methods:{
          showDetail(item){
            this.loading = true
            let that = this
            let param = {
              id:item.id
            }
            getAction(this.url.queryById, param).then(res => {
              if (res.success) {
                that.$refs.ShowAnnouncement.detail(res.result);
              } else {
                this.messageUtil.warning(res.message)
              }
              this.loading = false
            })
          },
          loadData(){
            this.loading = true
            let that = this
            let param = {
              limit:8
            }
            getAction(this.url.queryAnnouncementsByLimit, param).then(res => {
              if (res.success) {
                that.dataSource = res.result.list
                that.count = res.result.count
              } else {
                this.messageUtil.warning(res.message)
              }
              this.loading = false
            })
          },
          loadMore(){
            this.$router.push({
              path: '/tool/announcement'
            }).catch(err => {})
          },
        }
    }
</script>

<style lang="less">
  @import '~@/views/system/portlet/css/basicStyle.less';
</style>
